<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Competence Test</title>
<script src="<%=request.getContextPath()+"/" %>jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
According user's input,we can calculate the result:<br>
<form id="loginForm" action="<%=request.getContextPath()+"/" %>user/compResult" method="get">
		<div class="control-group">
			<label for="username" class="control-label">Materials:</label>
			<div class="controls">
			<c:forEach var="item" items="${data.MaterialLevels}" varStatus="status">     
  <input type="checkbox" name="material" value="${item.id }">  ${item.value }<br>       
</c:forEach> 
			</div>
		</div>
		<div class="control-group">
			<label for="password" class="control-label">Enterprise Level:</label>
			<div class="controls">
			<c:forEach var="item" items="${data.EnterpriseLevels}" varStatus="status">     
  <input type="radio" name="level" value="${item.id }">  ${item.value }<br>       
</c:forEach> 
			</div>
		</div>
	</form>
		<div class="control-group">
			<div class="controls">
				<button id="submit_btn" class="btn">Show me the Result</button>
			</div>
		</div>
	
		<script>
		 $("#submit_btn").click(function(){
			 $.get("<%=request.getContextPath()+"/" %>user/compResult?"+$('form').serialize(), function(result){
				   alert("Result:\n"+result.data.data) 
				  });
			}); 
	</script>
</body>
</html>